<template>
  <div class="add">
    <div class="head">
      <img class="logo" src="../../assets/images/中国连环画.png" alt="" />
      <div class="person">
        <div class="setUp">
          <div class="whitebg"></div>
          <Dropdown class="dropdownbox" @on-click="menuClick">
            <div class="bg">
              <Icon type="ios-settings" color="rgb(148,163,184)" size="20" />
            </div>
            <DropdownMenu slot="list">
              <!-- <DropdownItem name="personalCenter">设置</DropdownItem> -->
              <DropdownItem name="loginOut">注销</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <div class="userHover">
          <div class="whitebg"></div>
          <img class="user" src="../../assets/images/icon_people.png" alt="" />
        </div>
        <p>{{ user && user.name ? user.name : "" }}</p>
      </div>
    </div>
    <div class="tableHeader">
      <p class="tableTitle">
        目录整理
        <span class="success"
          >{{ user.name }}已录入 <span class="green">{{ count }}</span> 条</span
        >
      </p>
      <div class="d-flex align-items-center">
        <Input
          icon="ios-search"
          placeholder="请输入书名查询"
          v-model="searchItem.searchKey"
          @on-search="getData((page = 1))"
          search
          enter-button="搜索"
        />
        <Button class="addBtn" type="primary" @click="add = true"
          >+&nbsp;&nbsp;添加目录</Button
        >
        <Button class="addBtn" type="primary" @click="showImport = true"
          >+&nbsp;&nbsp;导入</Button
        >
      </div>
    </div>
    <div style="padding: 0px 2.5rem">
      <Table :columns="columns" :data="datalist" :loading="loading">
        <template slot-scope="{ row, index }" slot="action">
          <!-- <span class="btn" @click="local(index, 'add')">设置问卷</span> -->
          <!-- <span class="btn" @click="local(index, 'detail')">详情</span> -->
          <span class="btn" @click="local(index, 'edit')">编辑</span>
          <!-- <span class="btn" @click="copy(row.code)">复制</span> -->
          <span class="btn" @click="action('del', row.code)">删除</span>
        </template>
      </Table>
      <div class="text-right mt-4">
        <Page
          :total="total"
          :page-size-opts="[10, 20, 40, 50, 100]"
          show-sizer
          :current="page"
          :page-size="pageSize"
          @on-page-size-change="pageSizeChange"
          @on-change="pageChange"
        ></Page>
      </div>
    </div>
    <Drawer
      title="目录整理"
      v-model="add"
      width="520"
      :mask-closable="false"
      :styles="styles"
    >
      <Form :model="formData">
        <FormItem label="书名" label-position="top" required>
          <Input v-model="formData.name" placeholder="请输入书名" />
        </FormItem>
        <FormItem label="原著" label-position="top">
          <Input v-model="formData.original" placeholder="请输入原著" />
        </FormItem>
        <FormItem label="编者" label-position="top">
          <Input v-model="formData.author" placeholder="请输入编者" />
        </FormItem>
        <FormItem label="绘画" label-position="top">
          <Input v-model="formData.draw" placeholder="请输入绘画" />
        </FormItem>
        <FormItem label="封面" label-position="top">
          <Input v-model="formData.cover" placeholder="请输入封面" />
        </FormItem>
        <FormItem label="出版社" label-position="top" required>
          <Input v-model="formData.press" placeholder="请输入出版社" />
        </FormItem>
        <FormItem label="出版年份" label-position="top" required>
          <Input v-model="formData.pubYear" placeholder="请输入出版年份" />
        </FormItem>
        <FormItem label="出版月份" label-position="top" required>
          <Input v-model="formData.pubMonth" placeholder="请输入出版月份" />
        </FormItem>
        <FormItem label="印数" label-position="top">
          <Input v-model.number="formData.count" placeholder="请输入印数" />
        </FormItem>
        <FormItem label="定价（单位/元）" label-position="top">
          <Input v-model.number="formData.price" placeholder="请输入定价" />
        </FormItem>
        <FormItem label="页数" label-position="top">
          <Input v-model.number="formData.page" placeholder="请输入页数" />
        </FormItem>
        <FormItem label="开本" label-position="top">
          <Input v-model="formData.bookSize" placeholder="请输入开本" />
        </FormItem>
        <FormItem label="版次信息" label-position="top">
          <Input v-model="formData.edition" placeholder="请输入版次信息" />
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="add = false">取消</Button>
        <Button type="primary" @click="saveInfo">提交</Button>
      </div>
      <Modal
        v-model="success"
        :closable="false"
        okText="继续下一条"
        cancelText="退出"
        @on-ok="success = false"
        @on-cancel="(success = false), (add = false)"
      >
        <div class="d-flex mt-4 mb-4">
          <Icon type="md-checkmark-circle-outline" size="30" color="#36aa6f" />
          <h3 class="ml-3" style="font-weight: normal">提交成功！</h3>
        </div>
      </Modal>
    </Drawer>

    <Modal
      title="Excel导入"
      v-model="showImport"
      width="80vm"
      footer-hide
      :mask-closable="false"
    >
      <ImportData @success="getData"></ImportData>
    </Modal>
  </div>
</template>

<script>
import add from "./add.js";
export default add;
</script>
<style lang="less" scoped>
@import "./add.less";
</style>
